<template>
    <view class="contain">
        <up-navbar title="评论" :safeAreaInsetTop="true" bgColor="#FFF" :placeholder="true">
			<template #left>
				<view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
					<up-icon name="arrow-left" size="19" @click="goback"></up-icon>
					<up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
					<up-icon name="home" size="20" @click="goHome"></up-icon>
				</view>
			</template>
		</up-navbar>
        <view class="mx-[30rpx] my-[24rpx] bg-[#fff] rounded-[8rpx] p-[30rpx] ">
            <view class="flex items-center mb-[30rpx]">
                <image :src="Detail.pic" mode="scaleToFill" class="w-[136rpx] h-[136rpx] block rounded-[8rpx] mr-[20rpx]"/>
                <view>
                    <view class="text-[26rpx] text-[#000] font-bold">{{ Detail.name }}</view>
                    <view class="text-[24rpx] text-[#666] font-normal">规格:{{ Detail.productJson }}</view>
                </view>
            </view>
            <up-line></up-line>
            <view class="mt-[30rpx]">
                <view class="text-[26rpx] text-[#999] font-normal mb-[16rpx]">分享预约使用体验</view>
                <view class="flex items-center mb-[30rpx]">
                    <view class="mr-[24rpx] text-[26rpx] text-[#333] font-normal">评价</view>
                    <view>
                        <up-rate :count="5" v-model="count"></up-rate>
                    </view>
                </view>
                <view class="mb-[24rpx]">
                    <up-textarea v-model="content" placeholder="请输入内容" ></up-textarea>
                </view>
                <view class="flex items-end">
                    <template v-if="imgList.length">
                        <image v-for="(item,index) in imgList" :key="index" :src="item" mode="scaleToFill" class="w-[108rpx] h-[108rpx] block mr-[16rpx]"/>
                    </template>
                    <image @click="uploadImg" v-if="imgList.length < 3" src="../static/upload.png" mode="scaleToFill" class="w-[108rpx] h-[108rpx] block"/>
                    <view class="ml-[16rpx] text-[24rpx] text-[#999] font-normal">{{imgList.length}}/3</view>
                </view>
            </view>
        </view>
        <view class="btn" @click="Submit">提交</view>
    </view>
</template>

<script setup>
import { getToken } from '@/utils/auth'
import { onLoad } from '@dcloudio/uni-app'
import env from '@/config/common'
import { ref } from 'vue';
import { GetOrderComment } from '../../API/order';
const { Detail , imgList , count , Submit , content , uploadImg } = useDetail()
const { goHome , goback } = useTable()
const baseUrl = env.API_BASE_URL_DEV
function useTable (){
    const goback = () => {
        uni.navigateBack()
    }
    const goHome = () => {
        uni.switchTab({
            url: '/pages/index/index'
        })
    }
    return { goHome , goback }
}
function useDetail(){
    const Detail = ref({})
    const imgList = ref([])
    const count = ref(0)
    const content = ref('')
    const uploadImg = ()=>{
        uni.chooseImage({
	    count: 1, //默认9
	    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	    sourceType: ['album'], //从相册选择
	    success: (res)=>{
		    uni.uploadFile({
			    url: baseUrl + '/auth/common/upload', //仅为示例，并非真实的接口地址
			    filePath: res.tempFilePaths[0],
                header:{
                    Authorization: getToken()
                },
			    name: 'file',
			    success: (uploadFileRes) => {
                    imgList.value.push(JSON.parse(uploadFileRes.data).url)
			    }
		    })
	    }
    });
    }
    const Submit = async () => {
        let { data } = await GetOrderComment({
            score:count.value,
            orderGoodId:Detail.value.orderGoodId,
            content:content.value,
            pics:imgList.value
        })
        uni.showToast({
            title: '评价成功',
            icon: 'success',
            mask: true,
            success() {
                uni.navigateBack()
            }
        })
    }
    return { Detail , imgList , count , Submit , content , uploadImg }
}
onLoad((options)=>{
    Detail.value = JSON.parse(options.item)
    console.log(Detail.value);
})
</script>

<style lang="scss" scoped>
.contain{
    background-color: #f5f7f9;
    min-height: 100vh;

    .btn{
        left: 50%;
        width: 690rpx;
        bottom: 100rpx;
        padding: 20rpx 0;
        font-size: 32rpx;
        color: #46a7fd;
        font-weight: 400;
        position: absolute;
        text-align: center;
        border-radius: 16rpx;
        background-color: #fff;
        transform: translate(-50%,0);
        border: 1rpx solid #46a7fd;
    }
}
</style>